<template>
  <div style="text-align: left">
    <el-button class="add-button" type="success" @click="dialogFormVisible = true; updateRoomStatus = false">预订房间</el-button>
    <el-dialog
      title="预订房间"
      :visible.sync="dialogFormVisible"
      @close="clear">
      <el-form :model="form" style="text-align: left" ref="form">
        <el-form-item label="房号" :label-width="formLabelWidth" prop="roomNumber">
          <el-row v-text="form.roomNumber" v-if="this.updateRoomStatus === true"> </el-row>
          <el-select valueKey= "allFreeRoom.roomNumber" v-if="this.updateRoomStatus === false" v-model="allFreeRoom.roomNumber" placeholder="请选择房间" @focus="function1" @change="function2(allFreeRoom)">
            <el-option v-for="item in allFreeRoom" :value="item" :label="item.roomNumber" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间类型" :label-width="formLabelWidth" prop="roomInformation">
          <el-row v-text="form.roomInformation"></el-row>
        </el-form-item>
        <el-form-item label="房间详情" :label-width="formLabelWidth" prop="roomIntroduction">
          <el-row v-text="form.roomIntroduction"></el-row>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入住时间" :label-width="formLabelWidth" prop="checkInTime">
          <el-input v-model="form.checkInTime" autocomplete="off" placeholder="例：2020.1.1"></el-input>
        </el-form-item>
        <el-form-item label="退房时间" :label-width="formLabelWidth" prop="checkOutTime">
          <el-input v-model="form.checkOutTime" autocomplete="off" placeholder="例：2020.1.1"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idCard">
          <el-input v-model="form.idCard" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EditForm',
    data () {
      return {
        dialogFormVisible: false,
        updateRoomStatus: false,
        form: {
          roomNumber: '',
          roomInformation: '',
          roomIntroduction: '',
          name: '',
          checkInTime: '',
          checkOutTime: '',
          idCard: '',
        },
        rules:{
          roomNumber: [{required: true, message: '请输入房号', trigger:'blur'}],
          roomInformation: [{required: true, message: '请输入房间类型', trigger:'blur'}],
          roomIntroduction: [{required: true, message: '请输入房间详情', trigger:'blur'}],
          name: [{required: true, message: '请输入姓名', trigger:'blur'}],
          checkInTime: [{required: true, message: '请输入入住时间', trigger:'blur'}],
          checkOutTime: [{required: true, message: '请输入退房时间', trigger:'blur'}],
          idCard: [{required: true, message: '请输入身份证号', trigger:'blur'}]
        },
        allFreeRoom:[],
        formLabelWidth: '120px'
      }
    },
    methods: {
      //点击select框
      function1(){
        //发请求获取渠道下拉框的值
        this.$axios.get("/allFreeRoom").then(resp => {
          if(resp.code === 200){
            this.allFreeRoom = resp.obj;
          }
        })
      },
      function2(val){
        this.form.roomNumber = val.roomNumber.roomNumber;
        this.form.roomInformation = val.roomNumber.roomInformation;
        this.form.roomIntroduction = val.roomNumber.roomIntroduction;
        this.allFreeRoom.roomNumber = val.roomNumber.roomNumber;
      },
      clear () {
        this.form = {
          roomNumber: '',
          roomInformation: '',
          roomIntroduction: '',
          name: '',
          checkInTime: '',
          checkOutTime: '',
          idCard: '',
        };
          this.allFreeRoom = [];
      },
      onSubmit () {
        if (this.updateRoomStatus === false) {
          this.$axios
            .post('/insertRoomStatus', {
              roomNumber: this.form.roomNumber,
              roomInformation: this.form.roomInformation,
              roomIntroduction: this.form.roomIntroduction,
              name: this.form.name,
              checkInTime: this.form.checkInTime,
              checkOutTime: this.form.checkOutTime,
              idCard: this.form.idCard,
            }).then(resp => {
            if (resp && resp.code === 200) {
              this.dialogFormVisible = false;
              this.updateRoomStatus = false;
              this.$emit('onSubmit')
            }
          })
        }else {
          this.$axios.post('/updateRoomStatus',{
            roomNumber: this.form.roomNumber,
            roomInformation: this.form.roomInformation,
            roomIntroduction: this.form.roomIntroduction,
            name: this.form.name,
            checkInTime: this.form.checkInTime,
            checkOutTime: this.form.checkOutTime,
            idCard: this.form.idCard,
          }).then(resp => {
            if(resp && resp.code === 200){
              this.dialogFormVisible = false;
              this.updateRoomStatus = false;
              this.$emit('onSubmit')
            }
          })
        }
      },
    }
  }
</script>

<style scoped>
  .add-button {
    margin: 18px 0 0 10px;
  }
</style>
